
<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
        <title>avalon test</title>
        <script src="../../static/script/avalon.mobile.js"></script>
    </head>
    <style type="text/css">
        .list-view-title{
            border: 1px solid #ccc;
            padding: 5px;
            -webkit-touch-callout: none;
            user-select:none;
            -webkit-user-select: none;
        }

        .list-view-item{
            margin-bottom: 10px;
        }
    </style>
    <body ms-controller="controller">
        <p>https://github.com/amfe/lib.gesture</p>
        <div ms-repeat-item="data" class="list-view-item">
            <div class="list-view-title" ms-on-click="_switch(item,$event)">{{item.title}}</div>
            <div class="list-view-content" ms-visible="item.toggle">{{item.content|html}}</div>
        </div>
    </body>
    <script type="text/javascript">
var vmodel = avalon.define({
    $id: "controller",
    data: [{
            "title": "标题1",
            "content": "正文1<br>正文1",
            "toggle": true
        }, {
            "title": "标题2",
            "content": "正文2<br>正文2<br>正文2",
            "toggle": false
        }],
    _switch: function(item, e) {
        avalon.log(e.timeStamp + "!")
        if (item.toggle) {
            item.toggle = false;
        } else {
            item.toggle = true;
        }
    }
})
    </script>
</html>